import React from 'react';
import { Modal } from 'ywen-mobile-ui';
import PropTypes from 'prop-types';
import BaseComponent from '../../components/common/baseComponent.js';
import goldIcon from '../../../assets/images/qiji/giftcenter/glod_modal.png';
import silverIcon from '../../../assets/images/qiji/giftcenter/silver_modal.png';
import closeIcon from '../../../assets/images/qiji/giftcenter/close.png';
import { Vip } from '../../models/vip';

class VipModal extends BaseComponent {
  static propsTypes = {
    vip: PropTypes.instanceOf(Vip),
    show: PropTypes.bool,
    closeFunc: PropTypes.func,
    refuelFunc: PropTypes.func,
  }

  render() {
    const { show, vip, closeFunc, refuelFunc } = this.props;
    if (!show) {
      return null;
    }
    return (
      <Modal className="vip-modal-qiji">
        <div className="content">
          <p className="title">
            恭喜您获得
            <br />
            <span className="sub-title">鱿鱼加油{vip.get('cardName')}会员权益</span>
          </p>
          <img src={vip.get('cardId') === 1 ? goldIcon : silverIcon} alt="" className="vip" />
          <div className="vip-text">加油每升立减{vip.get('amountYuan')}元</div>
          <div className="text">(月度限额{vip.get('limitMonthMoneyYuan')}元，不与其他优惠叠加)</div>
          <div className="action-btn" onClick={refuelFunc}><div>去加油</div></div>
          <img src={closeIcon} alt="" className="close" onClick={closeFunc} />
        </div>
      </Modal>
    );
  }
}

export default VipModal;
